//1. 公用样式
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');
//2. 当前页面样式
require('./CourseTraining.less');

//3. 公用js
let dom=require('../../utils/dom.js');
let https=require('../../utils/https.js');
let local=require('../../utils/local.js');

//4. 当前页面的js
dom.ready(function () {
    dom.tMeun('CourseTraining');
    //调用底部菜单
    dom.bMeun('circle');

// 获取最新课程数据
    https.get('/api/train/courseList', {}, function (res) { 
        if (res.errno == 0) { 
            // console.log(res);
            res.data.forEach((v, i) => {
                // 最新课程数据渲染
                
                if (i == 0) {

                //方式一： 使用a标签属性实现跳转传参
                //     newCourse.innerHTML = `
                //        <a href='courseDetails.html?${v.courseId}'>//跳转  并传参数
                //             <img src="http://47.96.154.185:3701${v.imgurl}" width="100%" height="150px" alt="">
                //             <h4 class="course-title font16">${v.name}</h4>
                //             <p class="explain fon12">${v.desc}</p>
                //        </a>
                // `;
                    
                    // 方式二：
                    newCourse.innerHTML = `
                       <a >
                            <img data-id="${v.courseId}" src="http://47.96.154.185:3701${v.imgurl}" width="100%" height="150px" alt="">
                            <h4 class="course-title font16">${v.name}</h4>
                            <p class="explain font12">${v.desc}</p>
                       </a>
                `;
                    
                // 其他课程数据渲染
                } else { 
                    courseList.innerHTML += `
                        <li>
                            <a href='courseDetails.html?${v.courseId}'>
                            <h5 class="font18">${v.name}</h5>
                            <p class="font14">${v.desc}</p>
                            </a>
                        </li>
                    `;
                }
            });
        }
    });

// 方式二：使用js来实现页面跳转传参
    newCourse.addEventListener('click', function (e) {
        // console.log(e.target.dataset[`id`]);//获取id值  法1
        // console.log(e.target.dataset.id);//获取id值  法2
        // 获取当当前id
        let id = e.target.dataset.id;
            // 方式二：
            window.location.href = 'courseDetails.html?' + id;//跳转  并传参数

            // 方法三：
                // 先存储id到本地，再跳转
                local.set('courseId',id);
                location.href = 'courseDetails.html';//单跳转，不传参数
    });

  








})

